<template>
  <!-- 主内容区 -->
  <div class="min-h-screen transition-all duration-300">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 right-0 left-0 lg:left-64 z-40">
      <div class="flex items-center justify-between h-16 px-4">
        <div class="flex items-center">
          <button class="lg:hidden mr-2 text-gray-500 hover:text-gray-700 focus:outline-none" id="openSidebar">
            <i class="fa-solid fa-bars"></i>
          </button>
          <div class="relative">
            <span class="absolute inset-y-0 left-0 flex items-center pl-3">
              <i class="fa-solid fa-search text-gray-400"></i>
            </span>
            <input
              type="text"
              placeholder="搜索物料编码、名称..."
              class="pl-10 pr-4 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
            />
          </div>
        </div>

        <div class="flex items-center space-x-4">
          <button class="relative p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-full transition-colors">
            <i class="fa-solid fa-bell"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full"></span>
          </button>

          <div class="flex items-center space-x-2">
            <img
              src="https://picsum.photos/id/1005/200/200"
              alt="用户头像"
              class="w-8 h-8 rounded-full object-cover border-2 border-primary"
            />
            <span class="hidden md:inline-block text-sm font-medium">管理员</span>
            <i class="fa-solid fa-angle-down text-gray-500"></i>
          </div>
        </div>
      </div>
    </header>

    <!-- 内容区域 -->
    <main class="">
      <div class="mb-6">
        <h1 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">物料管理</h1>
        <p class="text-gray-500">管理紧固件物料信息、出入库记录和库存状态</p>
      </div>

      <!-- 数据概览卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-xl p-5 card-shadow">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm mb-1">物料总数</p>
              <h3 class="text-2xl font-bold">1,245</h3>
              <p class="text-success text-xs mt-2 flex items-center">
                <i class="fa-solid fa-arrow-up mr-1"></i> 2.5% <span class="text-gray-500 ml-1">较上月</span>
              </p>
            </div>
            <div class="w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center text-primary">
              <i class="fa-solid fa-cubes text-xl"></i>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-xl p-5 card-shadow">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm mb-1">库存总量</p>
              <h3 class="text-2xl font-bold">87,654</h3>
              <p class="text-success text-xs mt-2 flex items-center">
                <i class="fa-solid fa-arrow-up mr-1"></i> 4.3% <span class="text-gray-500 ml-1">较上月</span>
              </p>
            </div>
            <div class="w-12 h-12 bg-secondary/10 rounded-lg flex items-center justify-center text-secondary">
              <i class="fa-solid fa-warehouse text-xl"></i>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-xl p-5 card-shadow">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm mb-1">今日入库</p>
              <h3 class="text-2xl font-bold">1,234</h3>
              <p class="text-danger text-xs mt-2 flex items-center">
                <i class="fa-solid fa-arrow-down mr-1"></i> 1.2% <span class="text-gray-500 ml-1">较昨日</span>
              </p>
            </div>
            <div class="w-12 h-12 bg-success/10 rounded-lg flex items-center justify-center text-success">
              <i class="fa-solid fa-box-in text-xl"></i>
            </div>
          </div>
        </div>

        <div class="bg-white rounded-xl p-5 card-shadow">
          <div class="flex items-center justify-between">
            <div>
              <p class="text-gray-500 text-sm mb-1">今日出库</p>
              <h3 class="text-2xl font-bold">876</h3>
              <p class="text-success text-xs mt-2 flex items-center">
                <i class="fa-solid fa-arrow-up mr-1"></i> 3.7% <span class="text-gray-500 ml-1">较昨日</span>
              </p>
            </div>
            <div class="w-12 h-12 bg-warning/10 rounded-lg flex items-center justify-center text-warning">
              <i class="fa-solid fa-box-out text-xl"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 标签页导航 -->
      <div class="bg-white rounded-xl shadow-sm mb-6 overflow-hidden">
        <div class="flex border-b">
          <button class="px-6 py-4 text-primary font-medium border-b-2 border-primary" data-tab="material-list">物料列表</button>
          <button class="px-6 py-4 text-gray-500 font-medium hover:text-gray-700 transition-colors" data-tab="incoming">
            入库管理
          </button>
          <button class="px-6 py-4 text-gray-500 font-medium hover:text-gray-700 transition-colors" data-tab="outgoing">
            出库管理
          </button>
          <button class="px-6 py-4 text-gray-500 font-medium hover:text-gray-700 transition-colors" data-tab="inventory">
            库存查询
          </button>
        </div>

        <!-- 物料列表 -->
        <div id="material-list" class="p-6 animate-fade-in">
          <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
            <h2 class="text-xl font-bold mb-4 md:mb-0">物料基础信息</h2>
            <div class="flex space-x-3">
              <div class="relative">
                <select
                  class="pl-3 pr-10 py-2 rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary appearance-none bg-white"
                >
                  <option>全部类型</option>
                  <option>螺栓</option>
                  <option>螺母</option>
                  <option>螺钉</option>
                  <option>垫圈</option>
                  <option>销</option>
                </select>
                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-500">
                  <i class="fa-solid fa-chevron-down text-xs"></i>
                </div>
              </div>
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                <i class="fa-solid fa-plus mr-2"></i> 新增物料
              </button>
            </div>
          </div>

          <div class="overflow-x-auto">
            <table class="min-w-full bg-white rounded-lg">
              <thead>
                <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                  <th class="px-6 py-3 rounded-tl-lg">物料编码</th>
                  <th class="px-6 py-3">物料名称</th>
                  <th class="px-6 py-3">规格型号</th>
                  <th class="px-6 py-3">物料类型</th>
                  <th class="px-6 py-3">单位</th>
                  <th class="px-6 py-3">库存数量</th>
                  <th class="px-6 py-3 rounded-tr-lg">操作</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200">
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">MB001</td>
                  <td class="px-6 py-4 whitespace-nowrap">六角头螺栓</td>
                  <td class="px-6 py-4 whitespace-nowrap">M12×80</td>
                  <td class="px-6 py-4 whitespace-nowrap">螺栓</td>
                  <td class="px-6 py-4 whitespace-nowrap">件</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success"> 充足 (5,432) </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <button class="text-primary hover:text-primary/80 mr-3">
                      <i class="fa-solid fa-pencil"></i>
                    </button>
                    <button class="text-danger hover:text-danger/80">
                      <i class="fa-solid fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">MN001</td>
                  <td class="px-6 py-4 whitespace-nowrap">六角螺母</td>
                  <td class="px-6 py-4 whitespace-nowrap">M12</td>
                  <td class="px-6 py-4 whitespace-nowrap">螺母</td>
                  <td class="px-6 py-4 whitespace-nowrap">件</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full bg-warning-light text-warning"> 预警 (324) </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <button class="text-primary hover:text-primary/80 mr-3">
                      <i class="fa-solid fa-pencil"></i>
                    </button>
                    <button class="text-danger hover:text-danger/80">
                      <i class="fa-solid fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">MS001</td>
                  <td class="px-6 py-4 whitespace-nowrap">圆柱头内六角螺钉</td>
                  <td class="px-6 py-4 whitespace-nowrap">M8×40</td>
                  <td class="px-6 py-4 whitespace-nowrap">螺钉</td>
                  <td class="px-6 py-4 whitespace-nowrap">件</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success"> 充足 (2,156) </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <button class="text-primary hover:text-primary/80 mr-3">
                      <i class="fa-solid fa-pencil"></i>
                    </button>
                    <button class="text-danger hover:text-danger/80">
                      <i class="fa-solid fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">MW001</td>
                  <td class="px-6 py-4 whitespace-nowrap">平垫圈</td>
                  <td class="px-6 py-4 whitespace-nowrap">12</td>
                  <td class="px-6 py-4 whitespace-nowrap">垫圈</td>
                  <td class="px-6 py-4 whitespace-nowrap">件</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full bg-danger-light text-danger"> 短缺 (56) </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <button class="text-primary hover:text-primary/80 mr-3">
                      <i class="fa-solid fa-pencil"></i>
                    </button>
                    <button class="text-danger hover:text-danger/80">
                      <i class="fa-solid fa-trash"></i>
                    </button>
                  </td>
                </tr>
                <tr class="hover:bg-gray-50 transition-colors">
                  <td class="px-6 py-4 whitespace-nowrap">MP001</td>
                  <td class="px-6 py-4 whitespace-nowrap">圆柱销</td>
                  <td class="px-6 py-4 whitespace-nowrap">Φ8×30</td>
                  <td class="px-6 py-4 whitespace-nowrap">销</td>
                  <td class="px-6 py-4 whitespace-nowrap">件</td>
                  <td class="px-6 py-4 whitespace-nowrap">
                    <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success"> 充足 (1,234) </span>
                  </td>
                  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                    <button class="text-primary hover:text-primary/80 mr-3">
                      <i class="fa-solid fa-pencil"></i>
                    </button>
                    <button class="text-danger hover:text-danger/80">
                      <i class="fa-solid fa-trash"></i>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>

          <div class="flex items-center justify-between mt-6">
            <div class="text-sm text-gray-500">
              显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共
              <span class="font-medium">124</span> 条记录
            </div>
            <div class="flex space-x-1">
              <button
                class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50"
                disabled
              >
                <i class="fa-solid fa-chevron-left text-xs"></i>
              </button>
              <button class="px-3 py-1 rounded border border-primary bg-primary text-white">1</button>
              <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">2</button>
              <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">3</button>
              <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">4</button>
              <button class="px-3 py-1 rounded border border-gray-300 hover:bg-gray-50">5</button>
              <button class="px-3 py-1 rounded border border-gray-300 text-gray-500 hover:bg-gray-50">
                <i class="fa-solid fa-chevron-right text-xs"></i>
              </button>
            </div>
          </div>
        </div>

        <!-- 入库管理 -->
        <div id="incoming" class="p-6 hidden">
          <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
            <h2 class="text-xl font-bold mb-4 md:mb-0">入库管理</h2>
            <div class="flex space-x-3">
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                <i class="fa-solid fa-plus mr-2"></i> 新增入库单
              </button>
            </div>
          </div>

          <div class="bg-white rounded-lg border border-gray-200 mb-6 overflow-hidden">
            <div class="p-4 border-b">
              <h3 class="font-medium">入库单详情</h3>
            </div>
            <div class="p-4">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">入库单号</label>
                  <input
                    type="text"
                    value="RK20250623001"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    readonly
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">入库日期</label>
                  <input
                    type="date"
                    value="2025-06-23"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">供应商</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>上海紧固件有限公司</option>
                    <option>北京标准件厂</option>
                    <option>广州螺丝制造有限公司</option>
                    <option>深圳五金制品厂</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">入库仓库</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>一号仓库</option>
                    <option>二号仓库</option>
                    <option>三号仓库</option>
                  </select>
                </div>
              </div>

              <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                  <thead>
                    <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <th class="px-4 py-3 rounded-tl-lg">物料编码</th>
                      <th class="px-4 py-3">物料名称</th>
                      <th class="px-4 py-3">规格型号</th>
                      <th class="px-4 py-3">单位</th>
                      <th class="px-4 py-3">入库数量</th>
                      <th class="px-4 py-3">单价</th>
                      <th class="px-4 py-3">金额</th>
                      <th class="px-4 py-3 rounded-tr-lg">操作</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MB001</td>
                      <td class="px-4 py-3 whitespace-nowrap">六角头螺栓</td>
                      <td class="px-4 py-3 whitespace-nowrap">M12×80</td>
                      <td class="px-4 py-3 whitespace-nowrap">件</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <input
                          type="number"
                          value="1000"
                          class="w-20 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        />
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap">¥5.20</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">¥5,200.00</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa-solid fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MN001</td>
                      <td class="px-4 py-3 whitespace-nowrap">六角螺母</td>
                      <td class="px-4 py-3 whitespace-nowrap">M12</td>
                      <td class="px-4 py-3 whitespace-nowrap">件</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <input
                          type="number"
                          value="2000"
                          class="w-20 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        />
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap">¥1.50</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">¥3,000.00</td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa-solid fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div class="flex justify-end mt-4">
                <button class="px-4 py-2 text-primary border border-primary rounded-md hover:bg-primary/5 transition-colors mr-2">
                  添加物料
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                  保存入库单
                </button>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
            <div class="p-4 border-b">
              <h3 class="font-medium">入库单列表</h3>
            </div>
            <div class="p-4">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">入库单号</label>
                  <input
                    type="text"
                    placeholder="请输入入库单号"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">供应商</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>全部供应商</option>
                    <option>上海紧固件有限公司</option>
                    <option>北京标准件厂</option>
                    <option>广州螺丝制造有限公司</option>
                    <option>深圳五金制品厂</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">入库日期</label>
                  <div class="flex space-x-2">
                    <input
                      type="date"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    />
                    <input
                      type="date"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    />
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>全部状态</option>
                    <option>已创建</option>
                    <option>已审核</option>
                    <option>已入库</option>
                    <option>已取消</option>
                  </select>
                </div>
              </div>

              <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                  <thead>
                    <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <th class="px-4 py-3 rounded-tl-lg">入库单号</th>
                      <th class="px-4 py-3">供应商</th>
                      <th class="px-4 py-3">入库日期</th>
                      <th class="px-4 py-3">入库仓库</th>
                      <th class="px-4 py-3">物料数量</th>
                      <th class="px-4 py-3">总金额</th>
                      <th class="px-4 py-3">状态</th>
                      <th class="px-4 py-3 rounded-tr-lg">操作</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">RK20250623001</td>
                      <td class="px-4 py-3 whitespace-nowrap">上海紧固件有限公司</td>
                      <td class="px-4 py-3 whitespace-nowrap">2025-06-23</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap">2</td>
                      <td class="px-4 py-3 whitespace-nowrap">¥8,200.00</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">已入库</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-eye"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-print"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">RK20250622002</td>
                      <td class="px-4 py-3 whitespace-nowrap">北京标准件厂</td>
                      <td class="px-4 py-3 whitespace-nowrap">2025-06-22</td>
                      <td class="px-4 py-3 whitespace-nowrap">二号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap">3</td>
                      <td class="px-4 py-3 whitespace-nowrap">¥12,540.00</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">已入库</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-eye"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-print"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">RK20250621003</td>
                      <td class="px-4 py-3 whitespace-nowrap">广州螺丝制造有限公司</td>
                      <td class="px-4 py-3 whitespace-nowrap">2025-06-21</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap">5</td>
                      <td class="px-4 py-3 whitespace-nowrap">¥25,680.00</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-warning-light text-warning">已审核</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-eye"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-edit"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-print"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <!-- 出库管理 -->
        <div id="outgoing" class="p-6 hidden">
          <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
            <h2 class="text-xl font-bold mb-4 md:mb-0">出库管理</h2>
            <div class="flex space-x-3">
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                <i class="fa-solid fa-plus mr-2"></i> 新增出库单
              </button>
            </div>
          </div>

          <div class="bg-white rounded-lg border border-gray-200 mb-6 overflow-hidden">
            <div class="p-4 border-b">
              <h3 class="font-medium">出库单详情</h3>
            </div>
            <div class="p-4">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">出库单号</label>
                  <input
                    type="text"
                    value="CK20250623001"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    readonly
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">出库日期</label>
                  <input
                    type="date"
                    value="2025-06-23"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">使用部门</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>生产部</option>
                    <option>研发部</option>
                    <option>质量部</option>
                    <option>采购部</option>
                    <option>销售部</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">出库仓库</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>一号仓库</option>
                    <option>二号仓库</option>
                    <option>三号仓库</option>
                  </select>
                </div>
              </div>

              <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                  <thead>
                    <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <th class="px-4 py-3 rounded-tl-lg">物料编码</th>
                      <th class="px-4 py-3">物料名称</th>
                      <th class="px-4 py-3">规格型号</th>
                      <th class="px-4 py-3">单位</th>
                      <th class="px-4 py-3">库存数量</th>
                      <th class="px-4 py-3">出库数量</th>
                      <th class="px-4 py-3 rounded-tr-lg">操作</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MB001</td>
                      <td class="px-4 py-3 whitespace-nowrap">六角头螺栓</td>
                      <td class="px-4 py-3 whitespace-nowrap">M12×80</td>
                      <td class="px-4 py-3 whitespace-nowrap">件</td>
                      <td class="px-4 py-3 whitespace-nowrap text-success">5,432</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <input
                          type="number"
                          value="500"
                          class="w-20 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        />
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa-solid fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MS001</td>
                      <td class="px-4 py-3 whitespace-nowrap">圆柱头内六角螺钉</td>
                      <td class="px-4 py-3 whitespace-nowrap">M8×40</td>
                      <td class="px-4 py-3 whitespace-nowrap">件</td>
                      <td class="px-4 py-3 whitespace-nowrap text-success">2,156</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <input
                          type="number"
                          value="300"
                          class="w-20 px-2 py-1 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                        />
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-danger hover:text-danger/80">
                          <i class="fa-solid fa-trash"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <div class="flex justify-end mt-4">
                <button class="px-4 py-2 text-primary border border-primary rounded-md hover:bg-primary/5 transition-colors mr-2">
                  添加物料
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">
                  保存出库单
                </button>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
            <div class="p-4 border-b">
              <h3 class="font-medium">出库单列表</h3>
            </div>
            <div class="p-4">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">出库单号</label>
                  <input
                    type="text"
                    placeholder="请输入出库单号"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">使用部门</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>全部部门</option>
                    <option>生产部</option>
                    <option>研发部</option>
                    <option>质量部</option>
                    <option>采购部</option>
                    <option>销售部</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">出库日期</label>
                  <div class="flex space-x-2">
                    <input
                      type="date"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    />
                    <input
                      type="date"
                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    />
                  </div>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">状态</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>全部状态</option>
                    <option>已创建</option>
                    <option>已审核</option>
                    <option>已出库</option>
                    <option>已取消</option>
                  </select>
                </div>
              </div>

              <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                  <thead>
                    <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <th class="px-4 py-3 rounded-tl-lg">出库单号</th>
                      <th class="px-4 py-3">使用部门</th>
                      <th class="px-4 py-3">出库日期</th>
                      <th class="px-4 py-3">出库仓库</th>
                      <th class="px-4 py-3">物料数量</th>
                      <th class="px-4 py-3">状态</th>
                      <th class="px-4 py-3 rounded-tr-lg">操作</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">CK20250623001</td>
                      <td class="px-4 py-3 whitespace-nowrap">生产部</td>
                      <td class="px-4 py-3 whitespace-nowrap">2025-06-23</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap">2</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">已出库</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-eye"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-print"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">CK20250622002</td>
                      <td class="px-4 py-3 whitespace-nowrap">研发部</td>
                      <td class="px-4 py-3 whitespace-nowrap">2025-06-22</td>
                      <td class="px-4 py-3 whitespace-nowrap">二号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap">4</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">已出库</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-eye"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-print"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">CK20250621003</td>
                      <td class="px-4 py-3 whitespace-nowrap">质量部</td>
                      <td class="px-4 py-3 whitespace-nowrap">2025-06-21</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap">3</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-warning-light text-warning">已审核</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-eye"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80 mr-3">
                          <i class="fa-solid fa-edit"></i>
                        </button>
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-print"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>

        <!-- 库存查询 -->
        <div id="inventory" class="p-6 hidden">
          <div class="flex flex-col md:flex-row md:items-center justify-between mb-6">
            <h2 class="text-xl font-bold mb-4 md:mb-0">库存查询</h2>
            <div class="flex space-x-3">
              <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors flex items-center">
                <i class="fa-solid fa-download mr-2"></i> 导出报表
              </button>
            </div>
          </div>

          <div class="bg-white rounded-lg border border-gray-200 mb-6 overflow-hidden">
            <div class="p-4 border-b">
              <h3 class="font-medium">库存查询条件</h3>
            </div>
            <div class="p-4">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">物料编码</label>
                  <input
                    type="text"
                    placeholder="请输入物料编码"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">物料名称</label>
                  <input
                    type="text"
                    placeholder="请输入物料名称"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  />
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">物料类型</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>全部类型</option>
                    <option>螺栓</option>
                    <option>螺母</option>
                    <option>螺钉</option>
                    <option>垫圈</option>
                    <option>销</option>
                  </select>
                </div>
                <div>
                  <label class="block text-sm font-medium text-gray-700 mb-1">仓库</label>
                  <select
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                  >
                    <option>全部仓库</option>
                    <option>一号仓库</option>
                    <option>二号仓库</option>
                    <option>三号仓库</option>
                  </select>
                </div>
              </div>

              <div class="flex justify-end mt-4">
                <button class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors mr-2">
                  重置
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors">查询</button>
              </div>
            </div>
          </div>

          <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
            <div class="p-4 border-b">
              <h3 class="font-medium">库存状态</h3>
            </div>
            <div class="p-4">
              <div class="overflow-x-auto">
                <table class="min-w-full bg-white">
                  <thead>
                    <tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <th class="px-4 py-3 rounded-tl-lg">物料编码</th>
                      <th class="px-4 py-3">物料名称</th>
                      <th class="px-4 py-3">规格型号</th>
                      <th class="px-4 py-3">物料类型</th>
                      <th class="px-4 py-3">仓库</th>
                      <th class="px-4 py-3">库存数量</th>
                      <th class="px-4 py-3">安全库存</th>
                      <th class="px-4 py-3">状态</th>
                      <th class="px-4 py-3 rounded-tr-lg">操作</th>
                    </tr>
                  </thead>
                  <tbody class="divide-y divide-gray-200">
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MB001</td>
                      <td class="px-4 py-3 whitespace-nowrap">六角头螺栓</td>
                      <td class="px-4 py-3 whitespace-nowrap">M12×80</td>
                      <td class="px-4 py-3 whitespace-nowrap">螺栓</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">5,432</td>
                      <td class="px-4 py-3 whitespace-nowrap">1,000</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">充足</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-history"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MN001</td>
                      <td class="px-4 py-3 whitespace-nowrap">六角螺母</td>
                      <td class="px-4 py-3 whitespace-nowrap">M12</td>
                      <td class="px-4 py-3 whitespace-nowrap">螺母</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">324</td>
                      <td class="px-4 py-3 whitespace-nowrap">500</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-warning-light text-warning">预警</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-history"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MS001</td>
                      <td class="px-4 py-3 whitespace-nowrap">圆柱头内六角螺钉</td>
                      <td class="px-4 py-3 whitespace-nowrap">M8×40</td>
                      <td class="px-4 py-3 whitespace-nowrap">螺钉</td>
                      <td class="px-4 py-3 whitespace-nowrap">二号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">2,156</td>
                      <td class="px-4 py-3 whitespace-nowrap">800</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">充足</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-history"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MW001</td>
                      <td class="px-4 py-3 whitespace-nowrap">平垫圈</td>
                      <td class="px-4 py-3 whitespace-nowrap">12</td>
                      <td class="px-4 py-3 whitespace-nowrap">垫圈</td>
                      <td class="px-4 py-3 whitespace-nowrap">一号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">56</td>
                      <td class="px-4 py-3 whitespace-nowrap">200</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-danger-light text-danger">短缺</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-history"></i>
                        </button>
                      </td>
                    </tr>
                    <tr class="hover:bg-gray-50 transition-colors">
                      <td class="px-4 py-3 whitespace-nowrap">MP001</td>
                      <td class="px-4 py-3 whitespace-nowrap">圆柱销</td>
                      <td class="px-4 py-3 whitespace-nowrap">Φ8×30</td>
                      <td class="px-4 py-3 whitespace-nowrap">销</td>
                      <td class="px-4 py-3 whitespace-nowrap">三号仓库</td>
                      <td class="px-4 py-3 whitespace-nowrap font-medium">1,234</td>
                      <td class="px-4 py-3 whitespace-nowrap">600</td>
                      <td class="px-4 py-3 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full bg-success-light text-success">充足</span>
                      </td>
                      <td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
                        <button class="text-primary hover:text-primary/80">
                          <i class="fa-solid fa-history"></i>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 库存预警图表 -->
              <div class="mt-8">
                <h3 class="text-lg font-medium mb-4">库存预警统计</h3>
                <div class="bg-white p-4 rounded-lg shadow-sm">
                  <div class="h-64">
                    <!-- 这里将放置图表，实际实现需要使用Chart.js等库 -->
                    <div class="flex items-center justify-center h-full text-gray-400">
                      <i class="fa-solid fa-chart-bar text-5xl"></i>
                      <p class="ml-4">库存预警统计图表</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { Chart } from "chart.js";

// 定义物料类型映射
/*const MATERIAL_TYPES = {
  raw: { label: "原料", badgeClass: "bg-primary/10 text-primary" },
  "semi-finished": { label: "半成品", badgeClass: "bg-warning/10 text-warning" },
  finished: { label: "成品", badgeClass: "bg-success/10 text-success" },
  "low-value": { label: "低值品", badgeClass: "bg-dark-3/10 text-dark-3" }
};*/

// 状态管理
const currentView = ref("material");
const searchQuery = ref("");
/*const currentFilter = ref("all");*/
const currentPage = ref(1);
/*const pageSize = ref(4);*/

// 数据
const materials = ref([
  { code: "M-2025001", name: "主板-A12", type: "raw", stock: 350, safetyStock: 200, warehouse: "A01" },
  { code: "M-2025002", name: "电池-B20", type: "semi-finished", stock: 45, safetyStock: 100, warehouse: "B03" },
  { code: "M-2025003", name: "外壳-C30", type: "finished", stock: 25, safetyStock: 50, warehouse: "C02" },
  { code: "M-2025004", name: "螺丝-D10", type: "low-value", stock: 2000, safetyStock: 500, warehouse: "D05" }
  // 更多物料数据...
]);

// 计算属性
const totalMaterials = computed(() => materials.value.length);
const lowStockMaterials = computed(() => materials.value.filter(m => m.stock < m.safetyStock).length);
const todayTransactions = ref(48);
const totalGrowthRate = ref(8);
const lowStockIncrease = ref(3);
const todayGrowthRate = ref(15);

// 过滤和分页
/*const filteredMaterials = computed(() => {
  let filtered = materials.value;

  // 按类型过滤
  if (currentFilter.value !== "all") {
    filtered = filtered.filter(material => material.type === currentFilter.value);
  }

  // 按搜索词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(
      material => material.code.toLowerCase().includes(query) || material.name.toLowerCase().includes(query)
    );
  }

  // 分页
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filtered.slice(start, end);
});*/

/*const totalPages = computed(() => {
  let filteredCount = materials.value.length;

  // 按类型过滤
  if (currentFilter.value !== "all") {
    filteredCount = materials.value.filter(material => material.type === currentFilter.value).length;
  }

  // 按搜索词过滤
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    filteredCount = materials.value.filter(
      material => material.code.toLowerCase().includes(query) || material.name.toLowerCase().includes(query)
    ).length;
  }

  return Math.ceil(filteredCount / pageSize.value);
});*/

// 辅助方法
/*const getTypeBadgeClass = type => {
  return MATERIAL_TYPES[type]?.badgeClass || "bg-dark-3/10 text-dark-3";
};*/

/*const getStockStatusClass = (stock, safetyStock) => {
  if (stock < safetyStock) {
    return "text-danger";
  } else if (stock < safetyStock * 1.2) {
    return "text-warning";
  } else {
    return "text-success";
  }
};*/

// 图表相关
const chartRef = ref(null);
let materialChart = null;
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles"
  }
];
const chartData = ref({
  week: {
    labels: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    inData: [12, 19, 15, 20, 18, 10, 8],
    outData: [8, 15, 10, 12, 9, 5, 3]
  },
  month: {
    labels: ["第1周", "第2周", "第3周", "第4周"],
    inData: [50, 65, 75, 60],
    outData: [40, 55, 60, 45]
  },
  quarter: {
    labels: ["第1月", "第2月", "第3月"],
    inData: [150, 175, 160],
    outData: [130, 150, 140]
  }
});

const currentPeriod = ref("week");

// 生命周期钩子
onMounted(() => {
  initChart();
});

onUnmounted(() => {
  if (materialChart) {
    materialChart.destroy();
    materialChart = null;
  }
});

// 方法
const initChart = () => {
  if (!chartRef.value) return;

  const ctx = chartRef.value.getContext("2d");
  const data = chartData.value[currentPeriod.value];

  materialChart = new Chart(ctx, {
    type: "line",
    data: {
      labels: data.labels,
      datasets: [
        {
          label: "入库",
          data: data.inData,
          borderColor: "#3B82F6",
          backgroundColor: "rgba(59, 130, 246, 0.1)",
          tension: 0.3,
          fill: true
        },
        {
          label: "出库",
          data: data.outData,
          borderColor: "#10B981",
          backgroundColor: "rgba(16, 185, 129, 0.1)",
          tension: 0.3,
          fill: true
        }
      ]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          position: "top"
        },
        tooltip: {
          mode: "index",
          intersect: false
        }
      },
      scales: {
        y: {
          beginAtZero: true,
          grid: {
            drawBorder: false
          }
        },
        x: {
          grid: {
            display: false
          }
        }
      }
    }
  });
};

const changeChartPeriod = period => {
  currentPeriod.value = period;
  if (materialChart) {
    const data = chartData.value[period];
    materialChart.data.labels = data.labels;
    materialChart.data.datasets[0].data = data.inData;
    materialChart.data.datasets[1].data = data.outData;
    materialChart.update();
  }
};

/*
const filterByType = type => {
  currentFilter.value = type;
  currentPage.value = 1; // 重置页码
};

const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
  }
};

const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
  }
};

const goToPage = page => {
  if (page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
  }
};
*/

// 操作方法
const openAddMaterialModal = () => {
  console.log("打开添加物料模态框");
  // 实现添加物料逻辑
};

/*const viewMaterialDetails = code => {
  console.log("查看物料详情:", code);
  // 实现查看物料详情逻辑
};*/

/*
const editMaterial = code => {
  console.log("编辑物料:", code);
  // 实现编辑物料逻辑
};
*/

// 监听搜索查询变化
watch(searchQuery, () => {
  currentPage.value = 1; // 重置页码
});
</script>
